import React, { useState, useCallback } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");
  return <button onClick={onClick}>Click Me</button>;
});

const Ucallback = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Clicked");
  }

  // const handleClick = useCallback(() => {
  //   console.log("Clicked");
  // }, []);  // 空数组表示 handleClick 永远不会变

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
      <Child onClick={handleClick} />
    </div>
  );
};

export default Ucallback